<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评价信息</title>
    <link href="./css/normalize.css" rel="stylesheet" type="text/css">
    <link href="./css/TypeManagement.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="./css/font/iconfont.css">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/MarketInformation.css">
</head>
<body>
<div class="tbox">
    <div class="left">
        <iframe name="NavigationBar" width="250px" height="930px"
                src="components/NavigationBar.jsp" frameborder=0 scrolling="no"></iframe>
    </div>
    <div class="right">
        <iframe id="type" height="160px" name="NavigationBar" width=100% src="components/Header.jsp" frameborder=0
                scrolling="no"></iframe>
        <div class="catalog">当前位置：<a href="#">/ 评价信息 /</a></div>
        <form action="/EvaluateServlet?type=queryAll" method="post">
            <div class="typeSearch">
                <div> 供应商名称：<input type="text" name="companyName" id="" placeholder="请输入供应商名称"></div>
                <div> 评价人名称：<input type="text" name="adminName" id="" placeholder="请输入供应商名称"></div>
                <div> 评价日期：<input type="date" name="date" id="" placeholder="请输入发送日期"></div>
                <div> 合同编号：<input type="text" name="orderId" id="" placeholder="请输入合同编号"></div>
                <button class="_right_top_item_btn01 iconfont icon-sousuo">搜索</button>
            </div>
        </form>

        <div class="buttons">
            <button class="buttons_btn1"><span class="iconfont icon-tianjia"></span>新增</button>
        </div>

        <div class="info">
            <table>
                <tr>
                    <th>编号</th>
                    <th> 供应商名称</th>
                    <th> 采购订单编号</th>
                    <th> 评价人</th>
                    <th> 评论完成日期</th>
                    <th> 评价得分</th>
                    <th> 评价详情</th>
                    <th>操作</th>
                </tr>
                <c:forEach items="${evaluateVos}" var="evaluate">
                    <tr>
                        <td>${evaluate.evaluateId}</td>
                        <td>${evaluate.companyName}</td>
                        <td>${evaluate.orderId}</td>
                        <td>${evaluate.adminName}</td>
                        <td>${evaluate.date}</td>
                        <td>${evaluate.score}</td>
                        <td>${evaluate.evaluateInfor}</td>
                        <td>
                            <button class="updateInfo" onclick="update(this)" value="${evaluate}">修改</button>
                            <span style="font-size: 20px;">|</span>
                            <button
                                    class="delInfo"><a
                                    href="/EvaluateServlet?type=deleteById&evaluate_id=${evaluate.evaluateId}"
                                    onclick="return window.confirm('你确定要删除吗？删除数据后不可恢复，请谨慎操作！')">删除</a>
                            </button>
                        </td>
                    </tr>
                </c:forEach>
                <tr>
                    <td colspan="8">
                        总共${pages}页 共${totals}条
                        <a href="EvaluateServlet?type=queryAll&pageNow=1">首页</a>
                        <a href="EvaluateServlet?type=queryAll&pageNow=${pageNow >= pages ? pages:pageNow+1}">下一页</a>
                        <a href="EvaluateServlet?type=queryAll&pageNow=${pageNow <= 1?1:pageNow-1}">上一页</a>
                        <a href="EvaluateServlet?type=queryAll&pageNow=${pages}">尾页</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
<!-- 修改 -->
<div class="overlay">
    <div class="update">
        <div class="head_box">
            <span>修改信息</span>
        </div>
        <div class="body_box">
            <form action="EvaluateServlet?type=updateById" method="post">
                <table>
                    <tr>
                        <td>
                            <div>评价编号：</div>
                        </td>
                        <td>
                            <div><input type="text" class="updateEvaluate" name="evaluate_id" readonly="readonly"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>供应商编号：</div>
                        </td>
                        <td>
                            <div><input type="text" class="updateEvaluate" name="company_id" readonly="readonly"></div>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <div>评价人：</div>
                        </td>
                        <td>
                            <div><input type="text" class="updateEvaluate" name="admin_name" placeholder="请输入评价人"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>详情：</div>
                        </td>
                        <td>
                            <div><input type="text" class="updateEvaluate" name="evaluate_infor" placeholder="请输入评价详情">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>评分：</div>
                        </td>
                        <td>
                            <div><input type="text" class="updateEvaluate" name="score" placeholder="请输入评分"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>采购订单编号：</div>
                        </td>
                        <td>
                            <div><input type="text" class="updateEvaluate" name="order_id" readonly="readonly"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>评价日期：</div>
                        </td>
                        <td>
                            <div><input type="date" class="updateEvaluate" name="date" placeholder="请输入评价日期"></div>
                        </td>
                    </tr>
                </table>
                <div class="footer_box">
                    <input type="submit" class="cancel" value="取消"></input>
                    <input type="submit" class="confirm" value="确定"></input>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- 添加 -->
<div class="add">
    <div class="update">
        <div class="head_box">
            <span>添加信息</span>
        </div>
        <div class="body_box">
            <form action="EvaluateServlet?type=addEvaluate" method="post">
                <table>
                    <tr>
                        <td>
                            <div>评价编号：</div>
                        </td>
                        <td>
                            <div><input type="text" name="evaluate_id" placeholder="请输入供应商名称"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>供应商编号：</div>
                        </td>
                        <td>
                            <div><input type="text" name="company_id" placeholder="请输入供应商名称"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>采购订单编号：</div>
                        </td>
                        <td>
                            <div><input type="text" name="order_id" placeholder="请输入采购订单编号"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>评价人：</div>
                        </td>
                        <td>
                            <div><input type="text" name="admin_name" placeholder="请输入评价人"></div>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <div>评价日期：</div>
                        </td>
                        <td>
                            <div><input type="date" name="date" placeholder="请输入评价日期"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>详情：</div>
                        </td>
                        <td>
                            <div><input type="text" name="evaluate_infor" placeholder="请输入评价详情"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>评分：</div>
                        </td>
                        <td>
                            <div><input type="text" name="score" placeholder="请输入评分"></div>
                        </td>
                    </tr>
                </table>
                <div class="footer_box">
                    <input type="submit" class="cancel01" value="取消"></input>
                    <input type="submit" class="confirm" value="确定"></input>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    let updateInfo = document.querySelectorAll('.updateInfo')
    let overlay = document.querySelector('.overlay')
    let cancel01 = document.querySelector('.cancel01')
    let addInfo = document.querySelector('.add')
    let cancel = document.querySelector('.footer_box').getElementsByTagName('input')[0]
    let add = document.querySelector('.buttons').getElementsByTagName('button')[0]
    let iFrame = document.querySelector('#type')

    iFrame.onload = function () {
        iFrame.contentWindow.postMessage(window.location.pathname.substr(window.location.pathname.lastIndexOf('/')), '*');
    }

    updateInfo.forEach((item, index) => {
        item.addEventListener('click', (e) => {
            overlay.style.display = 'block'
            e.stopPropagation()
        })
    })

    cancel.onclick = function (e) {
        overlay.style.display = "none";
        addInfo.style.display = "none"
    }
    cancel01.onclick = function (e) {
        overlay.style.display = "none";
        addInfo.style.display = "none"
    }

    add.addEventListener('click', (e) => {
        addInfo.style.display = 'block'
    })

    function update(value) {
        const evaluate = value.value.substring(5).replace(/'/g, "").replace(/{/g, "").replace(/}/g, "");
        console.log(evaluate);
        let matchList = evaluate.match(/=([^,]*)/g);
        let dataList = matchList.map(match => match.substring(1))
        const input = document.getElementsByClassName('updateEvaluate');
        for (let i = 0; i < dataList.length; i++) {
            input[i].value = dataList[i]
        }
    }
</script>
</body>
</html>